<template>
  <div v-for="item in filters">{{item}}</div>
  <div>{{repositor}}</div>
  <!-- <div v-for="item in users" :key="item">{{item}}</div> -->
  <button @click="btnClick">点击</button>
</template>

<script lang="ts" >
import {onMounted, ref,computed} from 'vue'
import {login} from '../api/home'
import userFn from './use'
// vue2: this.users = 
export default {
  // data(){
  //   return {
  //     // filters:[{a:12},{a:10},{a:8},{a:6}],
  //     // searchQuery:''
  //   }
  // },
  // computed:{
  //   filteredRepositories():any{
  //     return this.filters.filter(item=>item.a>=10)
  //   }
  // },
  // methods:{
  //   updateFilers(){
  //     this.filters.push({a:40})
  //   }
  // },
  // mounted(){
  //   console.log('mounted');
  //   this.updateFilers()
  // },
  setup(props:any){
    // ref 将数据变成响应式数据
    const users = ref(); // {}默认值
    // 数据就可以驱动视图
    const filters = ref([{a:12},{a:10},{a:8},{a:6}])
    // const searchQuerys  = ref('')
    const getUser  = async ()=>{
      users.value =  await login({username:'admin',password:'123'})
    }

    // computed 提取出去了
    const {searchQuery,repositor}= userFn()
    const updateFilers=()=>{
      console.log('updateFilers')
    }
    const btnClick =()=>{
      // 数据放在方法里 视图不更新
      // Object.defineProperty
      // proxy 
      filters.value.push({a:Math.floor(Math.random()*100)})
    }
    // hooks 一个生命周期 可以写很多次
    onMounted(()=>{
      updateFilers()
    });
    onMounted(getUser);
    return {
      users,
      filters,
      searchQuery,
      repositor,
      // getUser
      btnClick,
    }
  }
}

</script>

<style>

</style>